<script setup lang="ts">
import {useStore} from "vuex";
import {ref} from "vue";

const store = useStore();
const  aa = () =>{
  store.state.isCollpace = !store.state.isCollpace
}

const ShujuCount = ref([
  {title:'导入客户总数',count:0},
  {title:'已添加客户总数',count:0},
  {title:'添加完成率',count:0},
  {title:'待添加客户数',count:0},
  {title:'待通过客户数',count:0}
])

const tableData = [

]

</script>

<template>
  <div>
    <!--   导航区   -->
    <div class="Statis1" >
      <el-icon size="23" @click="aa"><Fold /></el-icon>
      <div style="display: inline-block;margin-left: 10px;position: absolute;margin-top: 7px">
        <el-icon size="18" color="dodgerblue"><HomeFilled /></el-icon>
      </div>
      <div style="display: inline-block;margin-bottom: 5px;margin-left: 30px;margin-top: 10px">
        <el-breadcrumb separator="/" >
          <el-breadcrumb-item></el-breadcrumb-item>
          <el-breadcrumb-item>   <span style="font-size: 13px;color: black">引流获客</span> </el-breadcrumb-item>
          <el-breadcrumb-item>   <span style="font-size: 12px;color: gray">客户管理</span>   </el-breadcrumb-item>
          <el-breadcrumb-item>   <span style="font-size: 12px;color: gray">公海统计</span>   </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

    </div>

    <div class="Statis2">

      <div class="Statis3">
            <div class="Statis4"  v-for="l in ShujuCount" :key="l">
                <div style="color: white;font-size: 14px;margin-top: 20px;margin-left: 20px">{{l.title}}</div>
                <div style="color: white;margin-left: 20px;font-size: 22px">{{l.count}}</div>
            </div>
      </div>

      <div class="Statis5">

        <div style="margin-left: 15px;display:inline-block;margin-top: 20px">
          <el-text class="mx-1" size="large" >导入记录</el-text>
        </div>

        <div style="margin-top: 15px;margin-left: 15px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="导入表格名称" align="center" width="180" />
            <el-table-column prop="name" label="导入客户总数" align="center" width="180" />
            <el-table-column prop="address" label="导入时间" align="center" />
            <el-table-column prop="address" label="分配员工" align="center" />
            <el-table-column prop="address" label="待添加客户数" align="center" />
            <el-table-column prop="address" label="待通过客户数" align="center" />
            <el-table-column prop="address" label="已添加客户数" align="center" />
            <el-table-column prop="address" label="添加完成率" align="center" />

          </el-table>
        </div>



      </div>

      <div class="Statis5">

        <div style="margin-left: 15px;display:inline-block;margin-top: 20px">
          <el-text class="mx-1" size="large" >员工添加统计</el-text>
        </div>

        <div style="margin-top: 15px;margin-left: 15px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="员工名称" align="center" width="140" />
            <el-table-column prop="name" label="分配客户总数" align="center" width="180" />
            <el-table-column prop="address" label="待添加客户数" align="center" />
            <el-table-column prop="address" label="待通过客户数" align="center" />
            <el-table-column prop="address" label="已添加客户数" align="center" />
            <el-table-column prop="address" label="添加完成率" align="center" />
          </el-table>
        </div>



      </div>



    </div>

  </div>

</template>

<style scoped lang="scss">
.Statis1{
  width: 100%;
  height: 50px;
}
.Statis2{
  width: 98%;
  background-color: lavender;
}
.Statis3{
  width: 100%;
  height: 130px;
  background-color: white;
}
.Statis4{
  width: 16%;
  height: 90px;
  background-color: #027dfe;
  border-radius: 5px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 15px;
}
.Statis5{
  width: 100%;
  background-color: white;
  margin-top: 15px;
}
</style>